<script setup>
import { ref, watch } from 'vue'
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll'
import { useAirStore } from '@/stores'
import { storeToRefs } from 'pinia'
import { useFlyNumStore } from '@/stores/modules/flynum'
import {
  addLine,
  enList,
  ppList,
  peopleList,
  sList
} from '@/views/operation/manned-commute/js/addObjMove'

const flyNumStore = useFlyNumStore()
const airStore = useAirStore()
const { AirFlight, FocusAirId } = storeToRefs(airStore)

const currentId = ref('')
const focusAir = (item) => {
  if (currentId.value == item.snId) {
    currentId.value = ''
    __g.customObject.focus('air-' + item.snId, 2000)
    FocusAirId.value = item.snId
    __g.marker.showByGroupId('wrjMarker')
  } else {
    currentId.value = item.snId
    // __g.customObject.focus('air-' + item.snId, -1)
    __g.customObject.focus('air-' + item.snId, 100, 0, [-30, 4, 0], 1)
    FocusAirId.value = item.snId
    __g.marker.hideByGroupId('wrjMarker')
  }
}

const airList = ref([])
watch(
  () => flyNumStore.flyType,
  (newVal) => {
    airList.value = []
    let evtol = Number(newVal.evtol)
    let zhi = Number(newVal.zhi)
    let hua = Number(newVal.hua)
    console.log('forexxxx:', evtol, zhi, hua)
    if (evtol == 2 && zhi == 0 && hua == 0) {
      addLine(enList, [0, 1, 1, 1])
      addLine(ppList, [0, 1, 1, 1])
    }
    if (evtol == 2 && zhi == 0 && hua == 2) {
      addLine(enList, [0, 1, 1, 1])
      addLine(ppList, [0, 1, 1, 1])
    }
    if (evtol == 2 && zhi == 2 && hua == 2) {
      addLine(enList, [0, 1, 1, 1])
      addLine(ppList, [0, 1, 1, 1])
      addLine(peopleList, [1, 0, 1, 1])
      addLine(sList, [1, 0, 1, 1])
    }
    if (evtol == 2 && zhi == 2 && hua == 0) {
      addLine(enList, [0, 1, 1, 1])
      addLine(ppList, [0, 1, 1, 1])
      addLine(peopleList, [1, 0, 1, 1])
      addLine(sList, [1, 0, 1, 1])
    }
    if (evtol == 0 && zhi == 2 && hua == 0) {
      addLine(peopleList, [1, 0, 1, 1])
      addLine(sList, [1, 0, 1, 1])
    }
    if (evtol > 0) {
      for (let i = 0; i < evtol; i++) {
        airList.value.push({
          snId: '亿航216s',
          registerBody: i === 0 ? '盐田大梅沙文旅观光滑翔基地' : '',
          flyType: i === 0 ? '大梅沙' : '恩上公园'
        })
      }
    }
    if (zhi > 0) {
      for (let i = 0; i < zhi; i++) {
        airList.value.push({
          snId: '罗宾逊R44',
          registerBody: i === 0 ? '盐田大梅沙文旅观光滑翔基地' : '',
          flyType: i === 0 ? '大梅沙' : '东部华侨城'
        })
      }
    }
    if (hua > 0) {
      for (let i = 0; i < hua; i++) {
        airList.value.push({
          snId: '滑翔伞',
          registerBody: i === 0 ? '盐田大梅沙文旅观光滑翔基地' : '',
          flyType: i === 0 ? '大梅沙' : '东部华侨城'
        })
      }
    }
  },
  { deep: true, immediate: true }
)

// watch(
//   AirFlight,
//   (newVal) => {
//     airList.value = []
//     for (let i in newVal) {
//       if (newVal[i].flyType == 1) {
//         airList.value.push(newVal[i])
//         console.log('1:', newVal[i])
//       }
//     }
//   },
//   {
//     deep: true,
//     immediate: true
//   }
// )
</script>
<template>
  <div class="card">
    <div class="table">
      <ul class="thead">
        <li>飞行器型号</li>
        <li>活动空域</li>
        <li>运营单位</li>
      </ul>
      <ul class="tbody">
        <vue3-seamless-scroll
          :list="airList"
          :step="0.3"
          :hover="true"
          :isRemUnit="true"
          :wheel="true"
          :delay="3"
          :limitScrollNum="6"
        >
          <li
            v-for="(item, index) in airList"
            :key="index"
            :class="{ active: currentId == item.snId }"
            @click="focusAir(item)"
          >
            <p>
              <el-tooltip class="box-item" effect="dark" :content="item.snId" placement="top">
                <span>{{ item.snId }}</span>
              </el-tooltip>
            </p>
            <p>
              <span class="type">{{ item.flyType }}</span>
              <!-- <span class="type">文旅观光</span> -->
            </p>
            <p>
              <el-tooltip
                class="box-item"
                effect="dark"
                :content="item.registerBody"
                placement="top"
              >
                <span>{{ item.registerBody }}</span>
              </el-tooltip>
            </p>
          </li>
        </vue3-seamless-scroll>
      </ul>
    </div>
  </div>
</template>
<style scoped lang="scss">
.card {
  .table {
    width: 100%;
    padding: 10px;

    .thead {
      width: 100%;
      height: 37px;
      display: flex;
      background: url('@img/infrastructure/table_header_bg.png');
      background-size: 100% 100%;

      li {
        flex: 1;
        line-height: 37px;
        text-align: center;
      }
    }

    .tbody {
      height: 175px;
      overflow: hidden;

      li {
        display: flex;
        height: 37px;
        line-height: 37px;
        border-bottom: 1px solid #0f496c;
        cursor: pointer;

        &:nth-child(odd) {
          background-color: rgba(15, 73, 108, 0.3);
        }

        &.active {
          background-color: #026072;
        }

        P {
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          span {
            width: 100px;
            overflow: hidden;
            white-space: nowrap; /* 确保文本在一行内显示 */
            text-overflow: ellipsis; /* 超出部分显示省略号 */
          }

          .type {
            width: 67px;
            height: 20px;
            line-height: 20px;
            text-align: center;
            background: rgba(0, 213, 255, 0.25);
            border-radius: 2px;
            border: 1px solid #00d5ff;
          }
        }
      }
    }
  }
}
</style>
